<template>
  <div class="box">
    <h1>响应式数据判断</h1>
  </div>
</template>

<script>
import {ref,reactive,isRef,isReactive} from "vue"
export default {
  setup(){
    //1.普通定义,数据不是响应式的
    let name = "妲己";

    //2.ref定义响应式数据 , Object.definedproperty()
    let age = ref(10);
    let obj = ref({age:10});  //reactive

    //修改 ref-- xx.value
    age.value = 20;


    //3.reactive定义响应式数据，proxy实现响应式
    let user = reactive({
        name:"哈哈"
    });
    //修改 reactive 直接操作就可以
    user.name = "呵呵呵";


    //4.响应式数据判断
    //isRef: 检查一个值是否为一个 ref 对象
    console.log(isRef(obj)); //true
    console.log(isRef(user)); //false

    //isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
    console.log(isReactive(obj)); //false
    console.log(isReactive(user)); //true

    //2.返回数据
    return {
        name
    }
  }
}
</script>

<style>

</style>